<!--
 * @Author: your name
 * @Date: 2021-08-03 13:36:05
 * @LastEditTime: 2021-08-12 13:26:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \getHome (2)\src\components\discounts\amend.vue
-->
<!--管家数据同步-->
<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>管家信息管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0;">
      <div class="hander">管家信息管理</div>
      <div class="entirety">
        <div style="padding:10px;">
          <div class="search" style="margin-bottom: 0px;">
            <!-- 员工搜索信息 -->

            <!--  账号状态搜索信息 -->

            <div class="demo-input-suffix">
              归属城市
              <el-select
                v-model="subRgCode"
                placeholder="请选择"
                @change="busstwo"
                style="width: 150px"
              >
                <el-option
                  v-for="item in communityList"
                  :key="item.subRgCode"
                  :label="item.subRgName"
                  :value="item.subRgCode"
                >
                </el-option>
              </el-select>
              归属项目

              <el-select
                style="width: 150px"
                v-model="communityCode"
                :disabled="subRgCode === ''"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in business"
                  :key="item.communityCode"
                  :label="item.communityName"
                  :value="item.communityCode"
                >
                </el-option>
              </el-select>
              认证时间段
              <el-date-picker
                style="width: 230px"
                v-model="TimeLIst"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                prefix-icon="el-icon-date"
                clear-icon="el-icon-close"
                :editable="false"
              >
              </el-date-picker>
              <el-button
                style="background-color:#fd804c;color: #fff;"
                @click.native.prevent="isSelect"
                >查询</el-button
              >
              <el-button type="warning" @click.native.prevent="isEmpty"
                >清空</el-button
              >
            </div>
          </div>
          <div class="demo-input-suffix">
            <el-upload
              style="position:absolute;margin-top:10px;"
              action="/上传文件的接口"
              :on-change="onChange"
              :auto-upload="false"
              :show-file-list="false"
              accept=".xls, .xlsx"
            >
              <el-button type="warning" size="medium" icon="el-icon-folder-add"
                >导入管家</el-button
              >
            </el-upload>
            <el-button
              size="medium"
              style="margin-left:130px;;margin-top:12px;"
              :disabled="multipleSelection.length == 0 ? true : false"
            >
              <download-excel
                :data="multipleSelection"
                :fields="json_fields"
                name="用户账号表.xls"
              >
                导出管家</download-excel
              >
            </el-button>
            <el-button
              style="background-color:#fd804c;color: #fff;"
              size="medium"
              @click="isDialog('新增')"
              >新增管家
            </el-button>
          </div>
        </div>
        <el-dialog :title="msg" :visible.sync="dialogFormVisible" width="50%">
          <!--修改-->
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item
              label="名称"
              prop="materialName"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.materialName"></el-input>
            </el-form-item>
            <el-form-item
              label="管家手机号"
              prop="materialName"
              :label-width="formLabelWidth"
            >
              <el-input v-model="form.materialName"></el-input>
            </el-form-item>

            <el-form-item
              label="归属城市"
              prop="sort"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.sort" placeholder="请选择归属城市">
                <el-option
                  v-for="item in sortList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="归属城市公司"
              prop="targetType"
              :label-width="formLabelWidth"
            >
              <el-select
                v-model="form.targetType"
                placeholder="请选择归属城市公司"
              >
                <el-option
                  v-for="item in sortList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="项目名称"
              prop="authType"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.authType" placeholder="请选择项目名称">
                <el-option
                  v-for="item in sortList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="管辖区域"
              prop="refType"
              :label-width="formLabelWidth"
            >
              <el-checkbox-group
                v-model="refCode"
                @change="handleCheckedCitiesChange"
              >
                <el-checkbox
                  v-for="city in communityList"
                  :label="city.subRgCode"
                  :key="city.subRgCode"
                  >{{ city.subRgName }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                style="background-color:#fd804c;color: #fff;"
                @click="submitForm('form')"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <!--  员工列表栏位-->
      <div class="entirety">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="userName" label="管家ID">
            <template slot-scope="scope">
              <div>
                {{ scope.row.userName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="nickname" label="城市" width="120">
            <template slot-scope="scope">
              <div>
                {{ scope.row.nickname }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="项目名称">
            <template slot-scope="scope">
              <div>
                {{ scope.row.userName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="staffStatus" label="管家姓名" width="120">
            <template slot-scope="scope">
              <div>
                {{ scope.row.staffStatus }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="管家手机号码">
            <template slot-scope="scope">
              <div>
                {{ scope.row.userName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="房间ID">
            <template slot-scope="scope">
              <div>
                {{ scope.row.userName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="管家小程序权限
"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.userName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="170">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="isFrozen(scope.row.staffCode)"
                style="color: #fc9e76;"
                type="text"
                size="small"
              >
                关闭权限
              </el-button>
              <el-button
                @click.native.prevent="isInfo(scope.row.staffCode)"
                style="color: #fc9e76;"
                type="text"
                size="small"
              >
                管辖信息
              </el-button>

              <el-button
                @click="isDialog('修改', scope.row)"
                style="color: #fc9e76;"
                type="text"
                size="small"
              >
                修改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <div class="left"></div>
          <div class="right">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              class="page"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      json_fields: {
        //导出Excel表格的表头设置
        员工姓名: "nickname",
        登录账号: "userName",
        员工状态: "staffStatus"
      },
      msg: "",
      sortList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      communityCode: "",
      subRgCode: "",

      form: {
        authType: "",
        endTime: "",
        materialIcon: "",
        materialName: "",
        materialType: "",
        positionId: null,
        refType: null,
        sort: "",
        startTime: "",
        targetType: "",
        targetUrl: "",
        visitModel: ""
      },
      rules: {
        materialName: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],

        authType: [
          { required: true, message: "请选择跳转方式", trigger: "change" }
        ],

        targetType: [
          { required: true, message: "请选择跳转条件", trigger: "change" }
        ],
        sort: [
          { required: true, message: "请选择显示位置", trigger: "change" }
        ],
        targetUrl: [{ required: true, message: "请输入链接", trigger: "blur" }]
      },
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      TimeLIst: [],
      communityList: [],

      staffName: "",
      staffPhone: "",
      searchValue: "",
      userSearch: 0,

      formLabelWidth: "120px",
      staffSearch: [
        { value: 0, label: "员工姓名" },
        { value: 1, label: "登录账号" }
      ],
      id: "",
      refCode: [],
      StateData: "",
      business: [
        {
          statusCode: "1",
          statusName: "正常"
        },
        {
          statusCode: "2",
          statusName: "冻结"
        }
      ],
      multipleSelection: []
    };
  },
  activated() {
    this.DetailByPage();
    this.fetchRegionCommunityList();
  },

  methods: {
    // 更换
    busstwo(val) {
      console.log("val,,,,,,,,,", val);
      if (val == "") {
        this.communityCode = "";
      }
      // 监听城市的选择 筛选商圈的枚举
      if (val) {
        let businessArray = [];
        businessArray = this.communityList.find(item => item.subRgCode === val)
          .cityCommunityDict;
        if (businessArray) {
          this.business = businessArray;
          this.communityCode = "";
        }
      }
    },
    //----------以下为导入Excel数据功能--------------
    // 文件选择回调
    onChange(file, fileList) {
      console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel(e) {
      console.log(e);
      let that = this;
      const files = that.fileData;
      console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = ev => {
        try {
          const data = ev.target.result;
          // console.log(data)
          const workbook = this.XLSX.read(data, {
            type: "binary"
          });
          console.log(workbook.SheetNames);
          if (workbook.SheetNames.length >= 1) {
            this.$message({
              message: "导入数据表格成功",
              showClose: true,
              type: "success"
            });
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          console.log(ws);
          that.outputs = []; //清空接收数据
          for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              id: ws[i]["id"],
              stuNumber: ws[i]["学号"],
              stuName: ws[i]["姓名"],
              sex: ws[i]["性别"],
              tel: ws[i]["电话"],
              xueyuan: ws[i]["学院"],
              banji: ws[i]["班级"],
              lyNumber: ws[i]["楼宇号"],
              sushe: ws[i]["宿舍号"]
            };
            that.studentlist.unshift(sheetData);
          }
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      };
      // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);
    },
    isSelect() {
      //console.log("userSearch,,,,dsdsd,", this.userSearch);
      if (this.userSearch === 0) {
        this.staffName = this.searchValue || "";
      } else {
        this.staffPhone = this.searchValue || "";
      }

      (this.pageIndex = 1), (this.pageSize = 20), this.DetailByPage();
    },

    isEmpty() {
      (this.pageIndex = 1),
        (this.pageSize = 20),
        (this.total = 0),
        (this.staffName = ""),
        (this.communityCode = ""),
        (this.subRgCode = ""),
        (this.staffPhone = ""),
        (this.searchValue = ""),
        (this.userSearch = 0),
        (this.StateData = ""),
        this.DetailByPage();
    },

    isDialog(type, data) {
      this.msg = type;
      if (data !== undefined && type == "修改") {
        this.DetailByPage();
        this.id = data.id;
        this.refCode = data.refType;
        this.form = data;
      } else {
        this.form = {};
        this.refCode = [];
      }
      this.dialogFormVisible = true;
    },
    // 跳转页面
    add() {
      this.$router.push({
        path: "/arrStaff"
      });
    },
    isInfo(staffCode) {
      this.$router.push({
        path: "/governingDetails",
        query: {
          staffCode
        }
      });
    },
    handleCheckedCitiesChange(value) {
      this.form.refCode = value;
    },
    handleSelectionChange(val) {
      //console.log("handleSelectionChange,,,,,,,", val);
      this.multipleSelection = val;
    },
    //城市列表接口调用
    fetchRegionCommunityList() {
      this.$http({
        url: "/memberadmin/mgr/userCenter/fetchRegionCommunityList",
        method: "GET"
      }).then(res => {
        this.communityList = res;
      });
    },

    // 切换搜索条件清空数据
    changeSelect() {
      (this.searchValue = ""), (this.staffName = ""), (this.staffPhone = "");
    },

    // 精准模糊查找
    searchForUserInformation() {
      //console.log("userSearch,,,,dsdsd,", this.userSearch);
      if (this.userSearch === 0) {
        this.staffName = this.searchValue || "";
      } else {
        this.staffPhone = this.searchValue || "";
      }
      this.DetailByPage();
    },
    //冻结
    isFrozen(staffCode) {
      this.$confirm("是否冻结?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url:
              "/staffadmin/homeService/staffManager/updateStaffLoginAccountStatus",
            method: "POST",
            data: {
              staffCode,
              staffStatus: 2
            }
          }).then(res => {
            if (res.success === 0) {
              this.$message.error(res.errorMsg);
            } else {
              this.$message.success("冻结成功");
              this.DetailByPage();
            }
          });
        })
        .catch(() => {});
    },
    //解冻
    isThaw(staffCode) {
      this.$confirm("是否解冻?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url:
              "/staffadmin/homeService/staffManager/updateStaffLoginAccountStatus",
            method: "POST",
            data: {
              staffCode,
              staffStatus: 1
            }
          }).then(res => {
            if (res.success === 0) {
              this.$message.error(res.errorMsg);
            } else {
              this.$message.success("解冻成功");
              this.DetailByPage();
            }
          });
        })
        .catch(() => {});
      this.DetailByPage();
    },
    //导出
    isExport(tableData) {
      //console.log(tableData);
    },
    goToNewly() {
      this.$router.push({
        path: "/newly"
      });
    },

    // 更换状态数据
    changeState(val) {
      //console.log(val);

      this.StateData = val || "";
      this.DetailByPage();
    },
    //分页获取优惠券模板列表接口调用
    DetailByPage() {
      this.$http({
        url: `staffadmin/homeService/staffManager/fetchStaffLoginAccountList`,
        method: "GET",
        params: {
          staffStatus: this.StateData,
          staffName: this.staffName,
          staffPhone: this.staffPhone,
          registerCreateTime: this.TimeLIst[0]
            ? moment(this.TimeLIst[0]).format("YYYY-MM-DD HH:mm:ss")
            : "",
          registerEndTime: this.TimeLIst[1]
            ? moment(this.TimeLIst[1]).format("YYYY-MM-DD HH:mm:ss")
            : "",
          page: this.pageIndex,
          size: this.pageSize
        }
      }).then(res => {
        this.tableData = res.list;

        this.total = parseInt(res.total);
      });
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.DetailByPage();
    }
  }
};
</script>
<style scoped lang="scss">
.block {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.left {
  font-size: 15px;
}
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.news {
  margin-left: 16%;
}
.entirety {
  width: 95%;
  margin: 10px;
  // border: 7px solid #fafafa;
  border: 7px solid #ebeef1;
  border-radius: 10px;
  .basic {
    font-size: 18px;
    font-weight: 900;
    margin-top: 2%;
    margin-bottom: 1%;
    margin-left: 1%;
  }
}

.overall {
  width: 100%;
  height: auto;
  display: flex;

  justify-content: space-between;
  margin-top: 3%;
  .left {
    width: 20%;
    height: auto;
  }
  .right {
    width: 80%;
    height: auto;
  }
}
.demo-input-suffix {
  margin-left: 1%;
  width: 100%;
}
.select {
  width: 65%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}
.userSearch {
  display: flex;
  /deep/ .el-input__inner {
    box-sizing: border-box;
    height: 40px;
    border-radius: 0;
    width: 132px;
    border: 1px solid #dcdfe6;
  }
  /deep/ .el-icon-arrow-up:before {
    position: relative;
    top: -4px;
  }
  /deep/ .el-button {
    height: 40px;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    .el-icon-search {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-right: none;
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
.selects {
  width: 55%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}

/deep/ .but {
  background: #fd7097;
  color: #fff;
  margin-bottom: 1%;
}
.top {
  display: flex;

  justify-content: space-between;
}
</style>
